<template>
  <el-date-picker
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :type="type"
    :placeholder="placeholder"
    :format="format"
    :value-format="valueFormat"
    :clearable="clearable"
    class="date-selector"
  />
</template>

<script setup lang="ts">


interface Props {
  modelValue: string | Date | null
  type?: 'date' | 'datetime' | 'daterange' | 'datetimerange'
  placeholder?: string
  format?: string
  valueFormat?: string
  clearable?: boolean
}

withDefaults(defineProps<Props>(), {
  type: 'date',
  placeholder: '选择日期',
  format: 'YYYY-MM-DD',
  valueFormat: 'YYYY-MM-DD',
  clearable: true
})

defineEmits<{
  'update:modelValue': [value: string | Date | null]
}>()
</script>

<style scoped>
.date-selector {
  width: 100%;
}
</style>
